<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .triangle {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 50px 86.6px 50px;
        border-color: transparent transparent #555 transparent;
    }
    /*画横*/
    .a {
        margin-top: 20px;
        width: 100px;
        border: 2px solid red;
    }
    /*b和c分别画连接横线的两条变边*/
    .b {
        width: 100px;
        border: 2px solid red;
        transform-origin: 0 0;
        transform: rotate(60deg);
    }

    .c {
        width: 100px;
        border: 2px solid red;
        transform-origin: 100px 0;
        transform: rotate(-60deg);
    }
</style>
<body>
<div class="triangle"></div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</body>
</html>
